<template>
  <el-dialog :title="title" :visible.sync="visible" width="600px" :before-close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
      <el-form-item label="单位" required prop="unitCode">
        <treeselect :disabled="actionType == 'look'" class="input-w300" v-model="ruleForm.unitCode" :options="deptList"
          :show-count="true" placeholder="请选择" />
      </el-form-item>
      <el-form-item label="装备名称" prop="equipmentName">
        <el-input :disabled="actionType == 'look'" v-model.trim="ruleForm.equipmentName" placeholder="请输入" clearable
          class="input-w300" maxlength="50"></el-input>
      </el-form-item>
      <el-form-item label="装备编码" prop="equipmentEncoded">
        <el-input :disabled="actionType == 'look'" v-model.trim="ruleForm.equipmentEncoded" placeholder="请输入" clearable
          class="input-w300" maxlength="50"></el-input>
      </el-form-item>
      <el-form-item label="型号" prop="modelName">
        <el-input :disabled="actionType == 'look'" v-model.trim="ruleForm.modelName" placeholder="请输入" clearable
          class="input-w300" maxlength="50"></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="num">
        <el-input :disabled="actionType == 'look'" v-model.trim="ruleForm.num" type="number" placeholder="请输入" clearable
          class="input-w300" maxlength="50"></el-input>
      </el-form-item>
      <el-form-item label="性能描述" prop="performanceDesc">
        <el-input :disabled="actionType == 'look'" v-model.trim="ruleForm.performanceDesc" placeholder="请输入" clearable
          class="input-w300" maxlength="50"></el-input>
      </el-form-item>

      <!-- <el-form-item label="备注：" prop="remark">
        <el-input  :disabled="actionType == 'look'"  v-model.trim="ruleForm.remark" placeholder="请输入" clearable class="input-w300" maxlength="50"></el-input>
      </el-form-item> -->
      <el-form-item label="来源" prop="sourceId">
        <el-select :disabled="actionType == 'look'" v-model="ruleForm.sourceId" placeholder="请选择" clearable filterable
          class="input-w300">
          <el-option v-for="dict in dict.type.sys_equipment_source" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="完好率" prop="integrityRate">
        <el-slider :disabled="actionType == 'look'" class="input-w300" v-model="ruleForm.integrityRate"></el-slider>
      </el-form-item>
      <el-form-item label="是否启用" prop="useStatus">
        <el-radio-group  v-model="ruleForm.useStatus">
          <el-radio :disabled="actionType == 'look'" v-for="dict in dict.type.sys_equipment_enable" :key="dict.value" :label="dict.value"
            >{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer" v-if="actionType != 'look'">
      <el-button type="primary" @click="confirmForm('ruleForm')">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </span>
  </el-dialog>
</template>
  
<script>
import { addEquipment, updateEquipment } from "@/api/equipment";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: {
    Treeselect
  },
  dicts: ['sys_equipment_source', 'sys_position_type', 'sys_equipment_enable'],
  props: {
    visible: {
      default: false,
      type: Boolean
    },
    actionType: {
      default: '',
      type: String
    },
    title: {
      default: '',
      type: String
    },
    equipmentInfo: {
      type: Object,
      default: {},
    }
  },
  data() {
    return {
      fileAction: process.env.VUE_APP_BASE_API + '/common/upload',
      fileHeaders: {
        Authorization: "Bearer " + getToken()
      },
      fileList: [],
      personName: '',
      ruleForm: {
        equipmentName: '',
        equipmentEncoded: '',
        modelName: '',
        performanceDesc: '',
        remark: '',
        sourceId: '',
        num: '',
        useStatus: '',
        integrityRate: '',
        "unitCode": "",
      },
      rules: {
        equipmentName: [{
          required: true,
          message: '请输入装备名称',
          trigger: 'blur'
        }],
        equipmentEncoded: [{
          required: true,
          message: '请输入装备编码',
          trigger: 'blur'
        }],
        modelName: [{
          required: true,
          message: '请输入型号',
          trigger: 'blur'
        }],
        num: [{
          required: true,
          message: '请输入数量',
          trigger: 'blur'
        }],
        sourceId: [{
          required: true,
          message: '请选择来源',
          trigger: 'blur'
        }],
        integrityRate: [{
          required: true,
          message: '请输入完好率',
          trigger: 'blur'
        }],

        useStatus: [{
          required: true,
          message: '请选择是否启用',
          trigger: 'blur'
        }],
        unitCode: [{
          required: true,
          message: '请选择单位',
          trigger: 'blur'
        }],
      }
    };
  },
  computed: {
    deptList() {
      return this.$store.state.user.deptTreeList
    },
  },
  watch: {
    visible(val) {
      if (val) {
        if (this.equipmentInfo && this.equipmentInfo.id) {
          this.getEquipmentInfo()
        } else {
          this.ruleForm = {}
          
        }
      }else{
        this.$refs['ruleForm'].resetFields();
      }
    }
  },
  methods: {
    // 获取技能详情
    async getEquipmentInfo() {
      this.equipmentInfo.useStatus = String(this.equipmentInfo.useStatus)
      this.equipmentInfo.sourceId = String(this.equipmentInfo.sourceId)
      this.ruleForm = this.equipmentInfo;
    },
    // 确认新增人员
    handleSelectChannel(val) {
      this.ruleForm.personnelId = val.id;
    },

    // 确认提交按钮
    async confirmForm(form) {
      this.$refs[form].validate(async valid => {
        if (valid) {
          let params = {
            equipmentName: this.ruleForm.equipmentName,
            equipmentEncoded: this.ruleForm.equipmentEncoded,
            modelName: this.ruleForm.modelName,
            num: this.ruleForm.num,
            performanceDesc: this.ruleForm.performanceDesc,
            remark: this.ruleForm.remark,
            sourceId: this.ruleForm.sourceId,
            certificationMechanism: this.ruleForm.certificationMechanism,
            integrityRate: this.ruleForm.integrityRate,
            useStatus: this.ruleForm.useStatus,
            "unitCode": this.ruleForm.unitCode,
          }
          let res = null
          if (this.ruleForm.id) {
            params.id = this.ruleForm.id;
            res = await updateEquipment(params)
          } else {
            res = await addEquipment(params)
          }
          if (res.code == 200) {
            this.$message.success('成功')
            this.handleClose();
          } else {
            this.$message.error(res.msg)
          }
        } else {
          return false;
        }
      });

    },
    // 文件上传前检查
    beforeFileUpload(file) {
      var FileExt = file.name.replace(/.+\./, "");
      const isLtM = file.size / 1024 / 1024 < 150;
      const fileTypeList = ['jpg', 'jpeg', 'png']
      let isFileType = fileTypeList.indexOf(FileExt.toLowerCase()) > -1
      if (!isFileType || !isLtM) {
        this.$message.error('请检查文件格式以及大小');
      }
      return isFileType && isLtM;
    },
    // 文件上传成功
    handleFileSuccess(res, file) {
      if (res.code === 200) {
        this.fileList.push({
          name: file.originalFilename,
          url: res.url
        })
      }
    },
    // 文件删除
    handleRemove(file, fileList) {
      let index = fileList.indexOf(file);
      this.fileList.splice(index, 1)
    },
    // 取消
    handleCancel() {
      this.$emit('update:visible', false)
    },
    // 关闭
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },
    // 防抖函数
    debounceFun(func, delay) {
      let timer = null;
      return function (...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, args);
        }, delay);
      };
    },
  }
};
</script>
<style lang='scss' scoped></style>
  